<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <link class="theme" rel="stylesheet" type="text/css" href="./css/color/blue.css" />
</head>

<body>
  <div class="head">
    <div class="head-s">
      <span>风格颜色</span>
      <div class="head-l"><i class="fa fa-caret-left" onclick="api.closeWin()"></i></div>
      <!-- <div class="head-r"><i class="fa fa-user"></i></div> -->
    </div>
  </div>
    <!-- <header class="aui-bar aui-bar-nav header">
        <a class="aui-pull-left">
            <span class="aui-iconfont aui-icon-left" onclick="api.closeWin()"></span>
        </a>
        <div class="aui-title">风格颜色</div>
        <a class="aui-pull-right aui-btn">
            <span class="fa fa-user-circle-o" onclick="user()"></span>
        </a>
    </header> -->
    <div class="header-d"></div>

    <!-- 风格颜色 -->
    <div class="color">
        <div class="color-t"><span>风格颜色</span></div>
        <ul>
            <li>
                <p class="color-blue" onclick="changeColor(1)" id='color-blue'><span class="fa fa-check"></span></p>
            </li>
            <li>
                <p class="color-orange" onclick="changeColor(2)" id='color-orange'><span class="fa fa-check"></span></p>
            </li>
            <li>
                <p class="color-red" onclick="changeColor(3)" id='color-red'><span class="fa fa-check"></span></p>
            </li>
            <li>
                <p class="color-green" onclick="changeColor(4)" id='color-green'><span class="fa fa-check"></span></p>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>

</html>
<script>
    function changeColor(n) {

        var colorClass = $api.getStorage('classColor');
        $('#' + colorClass).removeClass(colorClass + ' active');
        $('#' + colorClass).addClass(colorClass);
        //  alert(colorClass);
        if (n == 1) {
            $api.setStorage('color', './css/color/blue.css');
            $api.setStorage('classColor', 'color-blue');
            $(".theme").attr("href", "./css/color/blue.css")
            $('#color-blue').addClass('color-blue active');
        } else if (n == 2) {
            $api.setStorage('color', './css/color/orange.css');
            $api.setStorage('classColor', 'color-orange');
            $(".theme").attr("href", "./css/color/orange.css");
            $('#color-orange').addClass('color-orange active');

        } else if (n == 3) {
            $api.setStorage('color', './css/color/red.css');
            $api.setStorage('classColor', 'color-red');
            $(".theme").attr("href", "./css/color/red.css")
            $('#color-red').addClass('color-red active');

        } else {
            $api.setStorage('color', './css/color/green.css');
            $api.setStorage('classColor', 'color-green');
            $(".theme").attr("href", "./css/color/green.css")
            $('#color-green').addClass('color-green active');
        }

        api.execScript({
            name: 'index',
            frameName:'temp',
            script: 'changeColor();'
        });
        api.execScript({
            name: 'user',
            script: 'userColor();'
        });
        api.execScript({
            name: 'index',
           frameName: 'classifynav0',
            script:'reloadIndex();'
        });
        api.execScript({
            name: 'index',
            frameName:'fangan',
            script: 'changeColor();'
        });
        api.execScript({
            name: 'index',
            frameName:'searchnew',
            script: 'changeColor();'
        });
        api.execScript({
            name: 'index',
            frameName:'xiangguan',
            script: 'changeColor();'
        });
    }
    apiready = function() {
        var color = $api.getStorage('color');
        $(".theme").attr("href", color);
        var colorClass = $api.getStorage('classColor');
        if (!colorClass) {
            $api.setStorage('classColor', 'color-blue');
            colorClass = 'color-blue'
        }
        $('#' + colorClass).addClass(colorClass + ' active');
    }

    function user() {
        api.openWin({
            name: 'user',
            url: './user.html',
        });
    }
</script>
